<script lang="ts" setup>
  import { buildStyles, getSize } from "../../utils";

  interface InputNumberProps {
    placeholder?: string;
    inputStyles?: any;
    defaultValue?: number;
    width?: string | number;
    extra?: string;
    min?: number;
  }

  const props = withDefaults(defineProps<InputNumberProps>(), {
    placeholder: "请输入内容...",
  });

  const styles = buildStyles(() => {
    return {
      width: getSize(props.width),
    };
  });

  function handleChange(event: any) {
    if (props.min !== undefined && event.target.value < props.min) {
      event.target.value = props.min;
    }
  }
</script>

<template>
  <div class="umi-input-number">
    <input type="number" name="umi-input-number" class="input" @change="handleChange" :style="styles" :placeholder="placeholder" :value="defaultValue" />
    <div class="suffix" v-if="extra">{{ extra }}</div>
  </div>
</template>

<style lang="scss" scoped>
  @use "../common";

  .umi-input-number {
    display: inline-block;
    position: relative;

    .suffix {
      font-size: 12px;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
</style>
